<template>
  <view class="container">
		<view :style="'height:'+statusbarH+'px'"></view>
	  <view class="u-search-flex">
			<!-- <u-icon @click="gotoproFun" name="map-fill" color="#2979ff"></u-icon>
			<span @click="gotoproFun" class="addr_font">北京</span> -->
			<u-search placeholder="搜索文章标题" v-model="keyword" :showAction="false" shape="round" @search="searchFun"></u-search>
			<!-- <u-icon @click="myMessageFun" class="chat_left" name="chat" color="#2979ff"></u-icon> -->
		</view>
		<view>
			<u-swiper
			:list="list1"
			></u-swiper>
		</view>
		<view style="margin-top: 20rpx;" v-if="columnList.length > 0">
			<u-notice-bar :text="columnList" direction="column" mode="closable" speed="300" url="/pages/personalCenter/myMessage/index"></u-notice-bar>
		</view>
		<view class="cart_box">
			<view class="cart_left" @click="goToMissionFun">
				<view class="cart_left_h1">任务广场</view>
				<view class="cart_left_color">全国<span class="font_color"> 4000+ </span>医院</view>
				<view class="ico_flex">
					<u-icon color="#fff" name="account"></u-icon>
					<span>立即申请</span>
				</view>
				<view class="ico_pro">
					<u-icon color="#fff" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="cart_right" @click="goTostudyFun">
				<view class="cart_left_h1">学习专区</view>
				<view class="cart_left_color">产品视频、文档</view>
				<view class="ico_flex" style="background-color: dodgerblue;">
					<u-icon color="#fff" name="star"></u-icon>
					<span>立即学习</span>
				</view>
				<view class="ico_pro">
					<u-icon color="#fff" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view>
			<u-tabs :list="articleTypeList" keyName="dictLabel" @change="changeFun">
				<!-- <view
					slot="right"
					class="slot_style"
					@tap="$u.toast('插槽被点击')"
				>
				 <span>查看更多</span>
				 <u-icon color="gray" name="arrow-right"></u-icon>
				</view> -->
			</u-tabs>
		</view>
		<view class="bg_wi">
			<u-empty style="margin-top: 100rpx;" v-if="!articleLists.length" text="暂无数据" mode="list"></u-empty>
			<view class="conten_flex" v-for="(item) in articleLists" :key="item.id" @click="gotopriFun(item.id)">
				<view style="flex: 1">
					<view class="color_black">{{ item.title }}</view>
					<view class="color_gray" style="margin: 10rpx 0;">{{ item.subhead }}</view>
					<view class="color_gray time_flex">
						<!-- <span>80阅读</span> -->
						<span>{{ item.publicTime }}</span>
					</view>
				</view>
				<view class="w100">
					<image class="img_logo" :src="item.photoUrl" mode="aspectFit"></image>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import { articletype, articleList } from '@/api/home.js'
	import { getbyuser, medicalRepresentative } from "@/api/login/index.js"
	import { messageList } from '@/api/personalCenter.js'
  export default {
    components: {},
    data() {
      return {
				type: '',
				status: '',
				userType: '',
				columnList: [],
				articleLists: [],
				statusbarH: 0,
			  articleTypeList: [],
				keyword: '',
				list1: [
					'https://img0.baidu.com/it/u=1320488644,3868827624&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=467',
					'https://img2.baidu.com/it/u=1875953843,1554270288&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=500',
					// require('../../static/2.jpg'),
					// require('../../static/3.jpg'),
				],
      }
    },
		onShow() {
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.reLaunch({
					url: "/pages/login/index"
				})
				return
			}
			this.messageListFun()
			uni.getSystemInfo({
					success:(e)=> {
					this.statusbarH = e.statusBarHeight;
				}
			})
			this.articletypeFun()
			
			if (JSON.parse(uni.getStorageSync('userInfo')).userType == '02') {
				// 代表
				this.userType = 2
			} else{
				// 代理商
				this.userType = 1
			}
			((JSON.parse(uni.getStorageSync('userInfo')).userType == '02')? medicalRepresentative : getbyuser)(JSON.parse(uni.getStorageSync('userInfo')).userId).then((resmin) => {
				this.status = resmin.data.status
			})
			
			
			
		},
		methods: {
			messageListFun() {
				this.columnList = []
				messageList({
					userId: JSON.parse(uni.getStorageSync('userInfo')).userId,
					pageNum: 1,
					pageSize: 1000,
					// orderByColumn: 'seq',
					status: 0, // 0未读
				}).then((res) => {
					res.rows.forEach((val) => {
						this.columnList.push(val.title)
					})
				})
			},
			changeFun(e) {
				this.type = e.dictValue
				this.articleListFun()
			},
			searchFun() {
				this.articleListFun()
			},
			articleListFun() {
				let str = {}
				if (this.keyword) {
					str.title = this.keyword
				} else {
					str = {}
				}
				articleList({
					pageNum: 1,
					pageSize: 10000,
					type: this.type,
					...str,
					orderByColumn: 'seq',
				}).then((res) => {
					this.articleLists = res.rows
				})
			},
			articletypeFun() {
				articletype().then((res) => {
					this.articleTypeList = res.data
					this.type = res.data[0].dictValue
					this.articleListFun()
				})
			},
			myMessageFun() {
				uni.navigateTo({
					url: "/pages/personalCenter/myMessage/index"
				})
			},
			goToMissionFun() {
				if((this.userType == 2 && this.status == 6) || (this.userType == 1 && this.status == 4)){
					uni.navigateTo({
						url: '/pages/task/missionSquare/index'
					})
				} else {
					uni.showToast({
					  title: '请先激活后再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
				
			},
			goTostudyFun() {
				if(this.status >= 2){
					uni.navigateTo({
						url: "/pages/task/studyArea/index"
					})
				} else {
					uni.showToast({
					  title: '请先实名认证后再执行此操作',
					  icon: "none",
					  duration: 2000,
					})
				}
			},
			gotopriFun(id) {
				uni.navigateTo({
					url: `/pages/home/article/index?id=${id}`
				})
			},
			gotoproFun() {
				uni.navigateTo({
					url: '/pages/home/switchProvince/index'
				})
			},
		}
  }
</script>
<style  lang="scss" scoped>
	.u-search-flex {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	.addr_font {
		color: gray;
		font-size: 25rpx;
		margin: 0 10rpx;
		margin-right: 20rpx;
	}
	.chat_left {
		margin-left: 20rpx;
	}
	.container {
		padding: 20rpx;
		box-sizing: border-box;
		box-sizing: border-box;
		background-color: #f7f8ff;
		display: flex;
		flex-direction: column;
		height: 100vh; 
		overflow: hidden;
	}
	.cart_box {
		display: flex;
		width: 100%;
		margin-top: 20rpx;
		justify-content: space-between;
	}
	.cart_left, .cart_right {
		width: 48%;
		height:230rpx;
		background-color: #fff;
		border-radius: 15rpx;
		position: relative;
		text-align: left;
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	.ico_flex {
		display: flex;
		align-items: center;
		background: orange;
		color: #fff;
		width: 180rpx;
		justify-content: center;
		padding: 10rpx 0;
		box-sizing: border-box;
		border-radius: 50rpx;
		font-size: 25rpx;
	}
	.cart_left_h1 {
		font-size: 38rpx;
		font-weight: 900;
		margin-top: 25rpx;
	}
	.cart_left_color {
		color: gray;
		font-size: 30rpx;
		margin:  20rpx 0;
	}
	.font_color {
		color: red;
		padding: 0 10rpx;
	}
	.ico_pro {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		background: #111;
		border-radius: 50%;
	}
	.slot_style {
		display: flex;
		width: 165rpx !important;
		font-size: 28rpx;
		color: gray;
		padding-left: 10rpx;
		box-sizing: border-box;
	}
	.conten_flex {
		display: flex;
		height: 240rpx;
		border-bottom: 3px solid #f7f7f7;
		padding-top: 10rpx;
		.w100 {
			width: 300rpx;
			.img_logo {
				width: 300rpx;
				height: 150rpx;
			}
		}
		.color_black {
			color: #111;
			font-weight: 600;
			font-size: 31rpx;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			-webkit-line-clamp: 2;/* 控制在第几行进行加省略号 */
			-webkit-box-orient: vertical;
		}
		.color_gray {
			color: gray;
			font-size: 28rpx;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			-webkit-line-clamp: 2;/* 控制在第几行进行加省略号 */
			-webkit-box-orient: vertical;
		}
		.time_flex {
			display: flex;
			justify-content: space-between;
		}
	}
	.bg_wi {
		background-color: #fff;
		flex: 1;
		overflow: scroll;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}
</style>
